<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
	<title></title>
	<link href="../../dist/css/lanai-ui.min.css" rel="stylesheet" />
</head>

<body>
	<section class="content no-pad-top">
		<div class="box box-widget">
			<div class="box-body">
				<h3>
					默认表格
				</h3>
				<div class="row">
					<div class="col-sm-12">
						<table class="table">
							<thead>
								<tr>
									<th style="width: 60px">编号</th>
									<th style="width:180px">工具栏</th>
									<th>任务</th>
									<th>进度</th>
									<th style="width: 60px">完成量</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>1.</td>
									<td><div class='table-button-area text-center'>
										<a class="table-button table-button-default" href="#"><i class="fa fa-ellipsis-h"></i></a>
										<a class="table-button table-button-danger" href="#"><i class="fa fa-trash-o"></i></a>
										<a class="table-button table-button-warning" href="#"><i class="fa fa-print"></i></a>
										<a class="table-button table-button-primary" href="#"><i class="fa fa-remove"></i></a>
										<a class="table-button table-button-info" href="#"><i class="fa fa-info"></i></a>
									</div></td>
									<td>更新软件</td>
									<td>
										<div class="progress progress-xs">
											<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
										</div>
									</td>
									<td><span class="badge bg-red">55%</span></td>
								</tr>
								<tr>
									<td>2.</td>
									<td><div class='table-button-area text-center'>
										<a class="table-button table-button-default" href="#"><i class="fa fa-ellipsis-h"></i></a>
										<a class="table-button table-button-danger" href="#"><i class="fa fa-trash-o"></i></a>
										<a class="table-button table-button-warning" href="#"><i class="fa fa-print"></i></a>
										<a class="table-button table-button-primary" href="#"><i class="fa fa-remove"></i></a>
										<a class="table-button table-button-info" href="#"><i class="fa fa-info"></i></a>
									</div></td>
									<td>清理数据库缓存</td>
									<td>
										<div class="progress progress-xs">
											<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
										</div>
									</td>
									<td><span class="badge bg-yellow">70%</span></td>
								</tr>
								<tr>
									<td>3.</td>
									<td><div class='table-button-area text-center'>
										<a class="table-button table-button-default" href="#"><i class="fa fa-ellipsis-h"></i></a>
										<a class="table-button table-button-danger" href="#"><i class="fa fa-trash-o"></i></a>
										<a class="table-button table-button-warning" href="#"><i class="fa fa-print"></i></a>
										<a class="table-button table-button-primary" href="#"><i class="fa fa-remove"></i></a>
										<a class="table-button table-button-info" href="#"><i class="fa fa-info"></i></a>
									</div></td>
									<td>测试运行环境</td>
									<td>
										<div class="progress progress-xs progress-striped active">
											<div class="progress-bar progress-bar-primary" style="width: 30%"></div>
										</div>
									</td>
									<td><span class="badge bg-light-blue">30%</span></td>
								</tr>
								<tr>
									<td>4.</td>
									<td><div class='table-button-area text-center'>
										<a class="table-button table-button-default" href="#"><i class="fa fa-ellipsis-h"></i></a>
										<a class="table-button table-button-danger" href="#"><i class="fa fa-trash-o"></i></a>
										<a class="table-button table-button-warning" href="#"><i class="fa fa-print"></i></a>
										<a class="table-button table-button-primary" href="#"><i class="fa fa-remove"></i></a>
										<a class="table-button table-button-info" href="#"><i class="fa fa-info"></i></a>
									</div></td>
									<td>发现Bug并修复</td>
									<td>
										<div class="progress progress-xs progress-striped active">
											<div class="progress-bar progress-bar-success" style="width: 90%"></div>
										</div>
									</td>
									<td><span class="badge bg-green">90%</span></td>
								</tr>
								<tr>
									<td>5.</td>
									<td><div class='table-button-area text-center'>
										<a class="table-button table-button-default" href="#"><i class="fa fa-ellipsis-h"></i></a>
										<a class="table-button table-button-danger" href="#"><i class="fa fa-trash-o"></i></a>
										<a class="table-button table-button-warning" href="#"><i class="fa fa-print"></i></a>
										<a class="table-button table-button-primary" href="#"><i class="fa fa-remove"></i></a>
										<a class="table-button table-button-info" href="#"><i class="fa fa-info"></i></a>
									</div></td>
									<td>安装新版本</td>
									<td>
										<div class="progress progress-xs progress-striped">
											<div class="progress-bar progress-bar-danger" style="width: 60%"></div>
										</div>
									</td>
									<td><span class="badge bg-danger">60%</span></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<button type="button" class="btn btn-primary"
							value="table-bordered">边框<br /><code>.table-bordered</code></button>
						<button type="button" class="btn btn-default"
							value="table-condensed">宽高自适应<br /><code>.table-condensed</code></button>
						<button type="button" class="btn btn-success"
							value="table-striped">隔行变色<br /><code>.table-striped</code></button>
						<button type="button" class="btn btn-info"
							value="table-hover">鼠标浮动变色<br /><code>.table-hover</code></button>
					</div>
				</div>
			</div>
		</div>
	</section>
	<script src="../../dist/js/jquery.min.js"></script>
	<script src="../../dist/js/lanai-ui.min.js"></script>
	<script type="text/javascript">
		$(function () {
			$(".btn").click(function () {
				var that = this;
				$(".table").toggleClass($(that).val());
			})
		});
	</script>
</body>

</html>